<template>
	<div name="shopCard">
		<div class="shopCard">
			<div class="shopCardLeft">
				<img :src="img" alt="">
			</div>
			<div class="shopCardRight">
				<ul>
					<li  v-for="(item,index) in shopList" v-bind:key="index">
						<a :href="item.url">
							<img :src="item.img" alt="" />
							<p class="saleTitle">{{item.title}}</p>
							<p class="saleInfo">{{item.info}}</p>
							<span class="price">{{item.price}}元</span><del class="priced">{{item.priced}}元</del>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		},
		props:["shopList","img"]
	}
</script>

<style lang="stylus" scoped>
	.shopCard
		width 100%
		height 614px
		display flex
		.shopCardLeft
			width 234px
			height 100%
			img
				width 100%
				height 100%
		.shopCardLeft:hover
			transition all 0.3s
			z-index: 2;
			-webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
			box-shadow: 0 15px 30px rgba(0,0,0,.1);
			-webkit-transform: translate3d(0,-2px,0);
			transform: translate3d(0,-2px,0);
		.shopCardRight
			width 992px
			height 100%
			ul
				display flex
				flex-wrap wrap
				li
					width 234px
					height 300px
					margin-left: 14px;
					margin-bottom: 14px;
					background: #fff;
					text-align center
					img
						width 160px
						height 160px
						display block
						margin: 20px auto 18px;
					.saleTitle
						margin: 0 20px 3px;
						font-size: 14px;
						font-weight: 400;
						text-overflow: ellipsis;
						color: #212121;
						overflow: hidden;
						white-space: nowrap;
					.saleInfo
						height: 18px;
						margin: 0 20px 12px;
						font-size: 12px;
						text-overflow: ellipsis;
						color: #b0b0b0;
						overflow: hidden;
						white-space: nowrap;
					.price
						font-size 14px
						color: #ff6709;
					.priced
						font-size 14px
						color #b0b0b0;
				li:hover
					transition all 0.3s
					z-index: 2;
					-webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
					box-shadow: 0 15px 30px rgba(0,0,0,.1);
					-webkit-transform: translate3d(0,-2px,0);
					transform: translate3d(0,-2px,0);
</style>
